<template>
  <div class="order-management">
    <h1>订单管理</h1>

    <!-- 搜索框 -->
    <el-input
      placeholder="搜索订单号或客户名"
      v-model="searchQuery"
      clearable
      style="width: 200px;"
      @input="handleSearch"
    >
      <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
    </el-input>

    <!-- 状态过滤 -->
    <el-select v-model="filterStatus" placeholder="请选择" @change="handleFilter">
      <el-option label="全部" value=""></el-option>
      <el-option label="待付款" value="待付款"></el-option>
      <el-option label="待发货" value="待发货"></el-option>
      <el-option label="已完成" value="已完成"></el-option>
    </el-select>

    <!-- 订单列表 -->
    <table class="order-list">
      <thead>
        <tr>
          <th @click="sort('id')">订单号<span v-if="sortKey === 'id' && sortOrder === 'asc'">▲</span><span v-if="sortKey === 'id' && sortOrder === 'desc'">▼</span></th>
          <th @click="sort('customerName')">客户名<span v-if="sortKey === 'customerName' && sortOrder === 'asc'">▲</span><span v-if="sortKey === 'customerName' && sortOrder === 'desc'">▼</span></th>
          <th @click="sort('status')">订单状态</th>
          <th @click="sort('totalAmount')">总金额<span v-if="sortKey === 'totalAmount' && sortOrder === 'asc'">▲</span><span v-if="sortKey === 'totalAmount' && sortOrder === 'desc'">▼</span></th>
          <th @click="sort('orderTime')">下单时间<span v-if="sortKey === 'orderTime' && sortOrder === 'asc'">▲</span><span v-if="sortKey === 'orderTime' && sortOrder === 'desc'">▼</span></th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in filteredOrders" :key="order.id">
          <td>{{ order.id }}</td>
          <td>{{ order.customerName }}</td>
          <td>{{ order.status }}</td>
          <td>{{ order.totalAmount }}</td>
          <td>{{ order.orderTime }}</td>
          <td>
            <el-button type="text" @click="deleteOrder(order.id)">删除</el-button>
            <el-button type="text" @click="editOrder(order.id)">编辑</el-button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="filteredOrders.length"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [
 	{ id: '10001', customerName: '张三', status: '已完成', totalAmount: '￥300.00', orderTime: '2023-04-10 10:00' },
        { id: '10002', customerName: '李四', status: '待发货', totalAmount: '￥450.00', orderTime: '2023-04-11 15:00' },
        { id: '10003', customerName: '王五', status: '已完成', totalAmount: '￥1000.00', orderTime: '2023-04-16 07:00' },
        { id: '10004', customerName: '赵六', status: '待发货', totalAmount: '￥600.00', orderTime: '2023-04-22 23:00' },
        { id: '10005', customerName: '孙七', status: '待付款', totalAmount: '￥750.00', orderTime: '2023-04-25 12:00' },
        // 更多订单...
      ],
      searchQuery: '',
      filterStatus: '',
      sortKey: '',
      sortOrder: 'asc',
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    filteredOrders() {
      let filtered = this.orders;
      if (this.searchQuery) {
        filtered = filtered.filter(order =>
          order.id.includes(this.searchQuery) || order.customerName.includes(this.searchQuery)
        );
      }
      if (this.filterStatus) {
        filtered = filtered.filter(order => order.status === this.filterStatus);
      }
      // Sort filtered results
      filtered.sort((a, b) => {
        let modifier = this.sortOrder === 'asc' ? 1 : -1;
        if (a[this.sortKey] < b[this.sortKey]) return -1 * modifier;
        if (a[this.sortKey] > b[this.sortKey]) return 1 * modifier;
        return 0;
      });
      return filtered;
    }
  },
  methods: {
    handleSearch() {
      // 重置分页
      this.currentPage = 1;
    },
    handleFilter() {
      // 重置分页
      this.currentPage = 1;
    },
    sort(key) {
      if (this.sortKey === key) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortOrder = 'asc';
      }
      this.sortKey = key;
      // 重置分页 to first page when sorting
      this.currentPage = 1;
    },
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    },
    viewOrder(orderId) {
      // 查看订单详情的逻辑
      console.log('查看订单：', orderId);
    },
    editOrder(orderId) {
      // 编辑订单的逻辑
      console.log('编辑订单：', orderId);
      alert('您没有权限编辑订单！');
    },
    deleteOrder(orderId) {
      // 删除订单的逻辑
      console.log('删除订单：', orderId);
      // 实现删除逻辑
      const index = this.orders.findIndex(order => order.id === orderId);
      if (index !== -1) {
        this.orders.splice(index, 1);
      }
    }
  }
};
</script>

<style scoped>
.order-management {
  margin: 20px;
}

.order-list {
  width: 100%;
  border-collapse: collapse;
}

.order-list thead {
  background-color: #f5f5f5;
}

.order-list th,
.order-list td {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: left;
}

.order-list th {
  text-align: center;
  cursor: pointer;
}

.order-list td {
  cursor: pointer;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

/* Add additional styles as needed */
</style>
